import React from 'react';
import './App.css';

import {
  QueryClient,
  QueryClientProvider,
} from 'react-query'
import { ReactQueryDevtools } from 'react-query/devtools';

import { Button } from 'antd';

import Index from './组件间通信/父传子';
import Index2 from './组件间通信/子传父';
import Index3 from './组件间通信/context';
import Index4 from './强化组件/extends';
import HOC from './强化组件/高阶组件原本的'
import HOC2 from './强化组件/抽离state控制更新'
import HOC3 from './强化组件/条件渲染'

import Demo1 from './components/Demo1'
import Fenbu from "./强化组件/分片渲染"
import Yibu from "./强化组件/异步组件"
import Jiechi from "./强化组件/渲染劫持"
import Sheng from './强化组件/劫持生命周期'
import Shijian from './强化组件/劫持生命周期'
import Pow from './hooks/自定义hooks/usePow/index'
import Ref from './hooks/useRef'
import MockMemo from './hooks/useCallback'
import Creation from './hooks/useCreation'
import Ta from './hooks/useEffect'
import Observer from './hooks/useReactive'
const handleChange=()=>{
  alert('你好呀，惠妹！！！')
}
const queryClient =new QueryClient()

function App() {

  return (
    <>
    <Observer/>
    <Ta/>
    <Creation/>
    <Ref/>
    <MockMemo/>
    <Pow/>
    <Shijian/>
    <Jiechi/>
    <Shijian/>
    <Yibu/>
    <Fenbu></Fenbu>
    <HOC2></HOC2>
    <HOC3></HOC3>
    <QueryClientProvider client={queryClient}>
      {
        process.env.NODE_ENV==='development' ? (
          <ReactQueryDevtools initialIsOpen={false} position='bottom-right'></ReactQueryDevtools>
        ) :('')
      }
      <Demo1></Demo1>
    </QueryClientProvider>
    <div className="App">
     <Button type='primary' onClick={handleChange}>你好呀，惠妹</Button>
     <Index/>
     <Index2/>
     <Index3/>
     <Index4/>
     <HOC/>
    </div>
    </>
  );
}

export default App;
